<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: center;
        }
        button {
            margin: 10px;
        }
    </style>
</head>
<body>

<button id="selectAllBtn">全选</button>
<button id="deselectAllBtn">取消全选</button>
<button id="toggleSelectionBtn">反选</button>
<button id="addBtn">添加</button>
<button id="deleteBtn">删除</button>

<button onclick="openFullscreen()">最大化</button>
<button onclick="closeFullscreen()">最小化</button>
<table id="myTable">
    <thead>
    <tr>
        <th><input type="checkbox" id="selectAll"> 全选</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
<!--    表格的主体部分-->
    <tbody>
    <tr>
        <td><input type="checkbox" class="rowCheckbox"></td>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="rowCheckbox"></td>
        <td>李四</td>
        <td>30</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="rowCheckbox"></td>
        <td>王五</td>
        <td>22</td>
    </tr>
    </tbody>
</table>
 <script>  // 根据id拿到所有的状态
 const selectAllCheckbox = document.getElementById('selectAll');
 const rowCheckboxes = document.querySelectorAll('.rowCheckbox');

 // 全选或取消全选
 selectAllCheckbox.addEventListener('change', function() {
     rowCheckboxes.forEach(checkbox => {
         checkbox.checked = this.checked;   //通过checked属性改变选择
     });
 });

 // 当某个单元格复选框被改变时，如果不是全部选中，则取消全选复选框的勾选
 rowCheckboxes.forEach(checkbox => {
     checkbox.addEventListener('change', function() {
         if (![...rowCheckboxes].every(cb => cb.checked)) {
             selectAllCheckbox.checked = false;
         } else if ([...rowCheckboxes].every(cb => cb.checked)) {
             selectAllCheckbox.checked = true;
         }
     });
 });

 // 全选按钮
 document.getElementById('selectAllBtn').addEventListener('click', function() {
     rowCheckboxes.forEach(checkbox => {
         checkbox.checked = true;
     });
     selectAllCheckbox.checked = true;
 });

 // 取消全选按钮
 document.getElementById('deselectAllBtn').addEventListener('click', function() {
     rowCheckboxes.forEach(checkbox => {
         checkbox.checked = false;
     });
     selectAllCheckbox.checked = false;
 });

 // 反选按钮
 document.getElementById('toggleSelectionBtn').addEventListener('click', function() {
     rowCheckboxes.forEach(checkbox => {
         checkbox.checked = !checkbox.checked;
     });
     // 更新全选复选框状态
     selectAllCheckbox.checked = [...rowCheckboxes].every(cb => cb.checked);
 });
 // 获取 HTML 元素
 const elem = document.documentElement;

 // 进入全屏模式
 function openFullscreen() {
     if (elem.requestFullscreen) {
         elem.requestFullscreen();
     } else if (elem.mozRequestFullScreen) { // Firefox
         elem.mozRequestFullScreen();
     } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
         elem.webkitRequestFullscreen();
     } else if (elem.msRequestFullscreen) { // IE/Edge
         elem.msRequestFullscreen();
     }
 }

 // 退出全屏模式
 function closeFullscreen() {
     if (document.exitFullscreen) {
         document.exitFullscreen();
     } else if (document.mozCancelFullScreen) { // Firefox
         document.mozCancelFullScreen();
     } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
         document.webkitExitFullscreen();
     } else if (document.msExitFullscreen) { // IE/Edge
         document.msExitFullscreen();
     }
 }

 </script>
</body>
</html>
